<style lang="scss" scoped>
.xjw-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  background: rgba(0, 0, 0, 0.34);
  transition: transform 0.3s;
  &--penetrate {
    pointer-events: none;
  }
}

.xjw-mask-show {
  opacity: 1;
}
</style>
<template>
  <view
    class="xjw-mask"
    hover-stop-propagation
    :style="[maskStyle]"
    @tap.stop="close"
    @touchmove.stop.prevent="() => {}"
    :class="{
      'xjw-mask-show': show,
      'xjw-mask--penetrate': !show,
    }"
  >
    <slot />
  </view>
</template>

<script lang="ts">
import Vue from "vue";
import { Component, Prop } from "vue-property-decorator";
@Component
export default class Index extends Vue {
  @Prop({ type: Boolean, default: false }) show;
  @Prop({ type: [Number, String], default: 300 }) duration;
  @Prop({ type: Boolean, default: true }) maskClickAble;
  @Prop({ type: Boolean, default: false }) isMaskHide;
  @Prop({ type: Number, default: 1900 }) zIndex;

  close() {
    if (this.isMaskHide) {
      this.$emit("maskClick");
    }
  }

  get maskStyle() {
    return {
      transition: `all ${this.duration / 1000}s ease-in-out`,
      "z-index": this.zIndex - 1,
    };
  }
}
</script>
